<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String contextPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menu</title>
<style type="text/css">
	#wrapper{
		margin-left: 70px;
		width: 800px;
	}
	#menuStyle{
		margin-bottom: 100px;
		margin-left: 20px;
	}
	.product_line { 
		width:705px; height:2px; float:left; background:#d3ccbe;
	}
	#detailGo{
		margin-left: 670px;
		font-weight: bolder;
		font-family: 'eng';
		font-size: 20pt;
		color : #8C0B03;
	}
	#detailGo:LINK {
		text-decoration: none;
	}
	#detailGo:VISITED {
		color : #8C0B03;
	}
	#detailGo:HOVER {
		color : black;
	}
	
</style>
<script type="text/javascript">
	function selectedMenu(imgId){
		document.getElementById(imgId).setAttribute("src", "images/item/"+imgId+"_sub.png");
	}
	function nonSelectedMenu(imgId){
		document.getElementById(imgId).setAttribute("src", "images/item/"+imgId+".png");
	}
	function clickedMenu(menuId){
		
		if(menuId=='menu1'){
			location.href="<%=contextPath%>/item.do?typeNum=1";
		} else if(menuId=='menu2'){
			location.href="<%=contextPath%>/item.do?typeNum=2";
		} else if(menuId=='menu3'){
			location.href="<%=contextPath%>/item.do?typeNum=3";
		}
	}
</script>
</head>
<body>
	<div id="wrapper">
		<table>
			<tr>
				<td style="vertical-align: bottom; text-align: left">
					<img src="images/item/menu_title.png" width="90%">
				</td>
				<td style="text-align: left">
					<img src="images/item/subimg_menu.png" width="80%">
				</td>
			</tr>
		</table>
		<p class="product_line"></p>
		<br>
		<table style="width: 670px">
			<tr>
				<td>
					<c:if test="${typeNum == 1}">
						<img src="images/item/menu1_sub.png" width="80" height="30" id="menu1"
							onclick="clickedMenu('menu1')">
						<img src="images/item/menu2.png"  width="90"  height="30" id="menu2" 
							onmouseover="selectedMenu('menu2')" onmouseout="nonSelectedMenu('menu2')"
							onclick="clickedMenu('menu2')">
						<img src="images/item/menu3.png"  width="80"  height="30" id="menu3" 
							onmouseover="selectedMenu('menu3')" onmouseout="nonSelectedMenu('menu3')"
							onclick="clickedMenu('menu3')">
					</c:if>
					<c:if test="${typeNum == 2}">
						<img src="images/item/menu1.png" width="80" height="30" id="menu1"
							onmouseover="selectedMenu('menu1')" onmouseout="nonSelectedMenu('menu1')"	
							onclick="clickedMenu('menu1')">
						<img src="images/item/menu2_sub.png"  width="90"  height="30" id="menu2" 
							onclick="clickedMenu('menu2')">
						<img src="images/item/menu3.png"  width="80"  height="30" id="menu3" 
							onmouseover="selectedMenu('menu3')" onmouseout="nonSelectedMenu('menu3')"
							onclick="clickedMenu('menu3')">
					</c:if>
					<c:if test="${typeNum == 3}">
						<img src="images/item/menu1.png" width="80" height="30" id="menu1"
							onmouseover="selectedMenu('menu1')" onmouseout="nonSelectedMenu('menu1')"	
							onclick="clickedMenu('menu1')">
						<img src="images/item/menu2.png"  width="90"  height="30" id="menu2" 
							onmouseover="selectedMenu('menu2')" onmouseout="nonSelectedMenu('menu2')"
							onclick="clickedMenu('menu2')">
						<img src="images/item/menu3_sub.png"  width="80"  height="30" id="menu3" 
							onclick="clickedMenu('menu3')">
					</c:if>
				</td>
			</tr>
		</table>
		<br>
	</div>
	
	<c:set var="cnt" value="0"></c:set>
	<!-- 아이템 전체 리스트 보기 -->
	<div id="menuStyle" style="text-align: left; width: 800px" align="left">
		<c:forEach var="item" items="${list}">
			<ul style="display:inline-block; text-align: center; width: 150px">
				<li style="display:inline">
					<img id="item${item.item_num}" src="images/item/item${item.item_num}.jpg" width="100">
					<br><br>
					<span style="font-family: nanum;">${item.item_name}</span>
				</li>
			</ul>
			<c:set var="cnt" value="${cnt+1}"></c:set>
			<c:if test="${cnt%4 == 0}">
				<br>
			</c:if>
		</c:forEach>
	</div>
	<!-- 상세보기 버튼 -->
	<a href="<%=contextPath%>/itemDetail.do?typeNum=${typeNum}" id="detailGo">
		<span style="color:#004000">Detail Book</span>  &nbsp; go ▶
	</a>
	<br><br><br><br><br>
</body>
</html>